<template>
  <contentModel title="提交审批">
    <div class="plan-alteration-receive-submit-examine-container">
      <query-page
        v-model:selectedKeys="selectedKeys"
        :form-component-config="formComponentConfig"
        :form-render-config="formRenderConfig"
        :form-render-keys="formRenderKeys"
        :table-component-config="tableComponentConfig"
        :table-render-config="tableRenderConfig"
        :table-render-keys="tableRenderKeys"
        :loading="isLoading"
        :data="renderData"
        :total="100"
        row-selection-type="checkbox"
        @selection-change="selectionChange"
        @query-data="getData"
      >
        <template #container-side>
          <a-space>
            <a-button @click="refuse">拒绝</a-button>
            <a-button @click="changeImplement">变更贯彻</a-button>
            <a-button @click="repealImplement">撤销贯彻</a-button>
            <a-button @click="cancel">取消</a-button>
            <a-button @click="gotReturnPage">返回</a-button>
          </a-space>
          <a-modal
            v-model:visible="visibleRefuse"
            @ok="handleOk1"
            @cancel="handleCancel1"
          >
            <template #title> 提示 </template>
            <div>您确定要拒绝所选的数据?</div>
          </a-modal>
          <a-modal
            v-model:visible="visibleChangeImplement"
            @ok="handleOk2"
            @cancel="handleCancel2"
          >
            <template #title> 提示 </template>
            <div>您确定要变更贯彻当前所选的数据?</div>
          </a-modal>
          <a-modal
            v-model:visible="visibleRepealImplement"
            @ok="handleOk3"
            @cancel="handleCancel3"
          >
            <template #title> 提示 </template>
            <div>您确定要撤销贯彻当前所选的数据?</div>
          </a-modal>
        </template>
      </query-page>
    </div>
  </contentModel>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineAsyncComponent } from 'vue';
  import { Modal, Message } from '@arco-design/web-vue';
  // import { useRouter } from 'vue-router';
  import queryPage from '@/common/components/query-page/index.vue';
  import { sleep } from '@/utils/tools';
  import {
    formRenderConfig,
    formComponentConfig,
  } from '@/views/purchase-plan/components/formComp/baseFormConfigAlterationSubmitExamine';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/purchase-plan/components/tableComp/baseTableConfigAlterationSubmitExamine';
  // import PageTitle from '../components/page-title.vue';
  // import PTabs from '../components/p-tabs.vue';
  import useModal from '@/common/hooks/modal';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const { closeModal } = useModal();

  const selectedKeys = ref([]);
  // const activeTab = ref('');
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  const formInfo = () => {
    const obj = ref(formRenderConfig);
    formRenderKeys.value = Object.keys(obj.value);
  };
  formInfo();
  // 当前表格要渲染哪些值
  const tableRenderKeys = ref<any[]>([]);
  const tableInfo = () => {
    const obj = ref(tableRenderConfig);
    tableRenderKeys.value = Object.keys(obj.value);
    console.log(Object.keys(obj.value), '1111');
  };
  tableInfo();
  // 返回采购计划变更页面
  // const router = useRouter();
  const gotReturnPage = () => {
    console.log('1111111');
    closeModal();
    // router.push({
    //   name: 'plan-alteration-receive',
    // });
  };
  // 表单选中的数据
  let selectList = reactive<string[]>([]);
  const selectionChange = (val: string[]) => {
    selectList = val;
    console.log('selectedKeys', val);
  };
  //    拒绝弹框
  const visibleRefuse = ref(false);
  const refuse = () => {
    if (selectList.length) {
      visibleRefuse.value = true;
    } else {
      Modal.info({
        title: '提示',
        content: '请至少选择一条数据!',
      });
    }
  };
  // 变更贯彻
  const visibleChangeImplement = ref(false);
  const changeImplement = () => {
    if (selectList.length) {
      visibleChangeImplement.value = true;
    } else {
      Modal.info({
        title: '提示',
        content: '请至少选择一条数据!',
      });
    }
  };
  // 撤销贯彻
  const visibleRepealImplement = ref(false);
  const repealImplement = () => {
    if (selectList.length) {
      visibleRepealImplement.value = true;
    } else {
      Modal.info({
        title: '提示',
        content: '请至少选择一条数据!',
      });
    }
  };
  // 取消
  const cancel = () => {};
  // 弹框触发的事件
  const handleOk1 = () => {
    visibleRefuse.value = false;
    Message.info({
      content: '拒绝成功!',
    });
  };
  const handleOk2 = () => {
    visibleChangeImplement.value = false;
    Message.info({
      content: '变更贯彻成功!',
    });
  };
  const handleOk3 = () => {
    visibleRepealImplement.value = false;
    Message.info({
      content: '撤销贯彻成功!',
    });
  };
  const handleCancel1 = () => {
    visibleRefuse.value = false;
  };
  const handleCancel2 = () => {
    visibleChangeImplement.value = false;
  };
  const handleCancel3 = () => {
    visibleRepealImplement.value = false;
  };
  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    await sleep(2000);
    const data = reactive([
      {
        id: 'id-1',
        secretLevel: '更改单编号..',
        info59: 'MM',
        info60: 'tt',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };
</script>

<style lang="less" scoped>
  .plan-alteration-receive-submit-examine-container {
    height: calc(100% - 32px);
    padding: 16px 24px;
    background: #fff;
  }
</style>
